<template>
  <div class="wrapper">
    <!-- <el-tabs v-model="tabIndex" @tab-click="handleTabClick" class="tab" type="border-card">
      <el-tab-pane label="未归档" name="0">
      </el-tab-pane>
      <el-tab-pane label="已归档" name="1">
      </el-tab-pane>
    </el-tabs> -->
    <div class="tab-content">
      <div class="actions" style="padding-bottom: 10px">
        <div class="left"></div>
        <div class="right" style="display: flex">
          <el-button
            type="primary"
            size="mini"
            @click="resultClickFn"
            style="margin: 0px 10px 0px 0px"
            >重置
          </el-button>
          <SettinUp
            :settype="headerId"
            :objSettinUpdata="objSettinUp"
            :key="tabIndex"
          ></SettinUp>
        </div>
      </div>
      <!-- 表格 -->
      <div
        class="table"
        v-if="header_data_list.length > 0"
        :key="Math.random()"
      >
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :redact="''"
          :particulars="''"
          :objheader="objheader"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="operation_type"
          :isNameLink="tabIndex === '1' ? true : false"
          @handleClickDetail_second="handleClickDetail_second"
          @handleClickEdit_second="handleClickEdit_second"
          @childEvent="handleWaybillNoClick"
        >
        </TableHeader>
      </div>
      <div class="actions" style="padding-top: 10px; width: 100%">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            small
            background
            :current-page="paginations.pageIndex"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="paginations.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import {
  fileList,
  fileDelete,
  formworkOptions,
  fileListExport,
  WaybillNoPlace,
  WaybillPlace,
} from "@/api/qms.js";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
export default {
  name: "fileRecordList",
  components: { TableHeader, SettinUp },
  props: [],
  data() {
    return {
      tableData: [],
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },

      checkedList: [],
      tabIndex: "0",

      searchParams: {},
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      operation_type: 0,
      dynParams: {},
    };
  },
  computed: {
    headerId() {
      if (this.tabIndex === "0") {
        return "1";
      } else if (this.tabIndex === "1") {
        return "32";
      }
    },
  },
  mounted() {
    this.getDataList();
  },

  methods: {
    handleTabClick() {
      this.paginations.pageIndex = 1;
      this.resultClickFn();
      this.getDataList();
    },
    handleWaybillNoClick(index, row, type) {
      this.handleJump(row);
    },
    async handleJump(row) {
      const id = this.tabIndex === "0" ? row.id : row.waybill_id;
      let text = this.$router.resolve({
        name: "waybillDetail",
        query: {
          id,
          activeName: this.tabIndex === "0" ? "1" : "4",
        },
      });
      window.open(text.href, "_blank");
    },
    // async handleJumpTemp(row) {
    //   const { waybill_id } = row;
    //   let text = this.$router.resolve({
    //     name: "waybillDetail",
    //     query: { id:waybill_id },
    //   });
    //   window.open(text.href, "_blank");
    // },
    handleExport() {
      fileListExport(this.dynParams).then((res) => {
        const linkurl = "https://" + res.data.loaded_url;
        window.open(linkurl);
      });
    },
    handleSelectionChange(checked) {
      this.checkedList = checked.map((item) => item.id);
    },
    handleAdd() {
      this.$router.push({
        name: "qualityFile",
      });
    },
    handleDel() {
      fileDelete({
        ids: this.checkedList,
      }).then((res) => {
        if (res.code === 10000) {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getDataList();
        }
      });
    },
    handleOperation(row, mode) {
      this.$router.push({
        name: "qualityFile",
        query: {
          id: row.id,
          mode,
        },
      });
    },

    resultClickFn() {
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = 20;
      this.$refs.TableHeaderList.childMethod();
    },
    objSettinUp() {
      this.getDataList();
    },
    getDataList(setHeader = true) {
      const params = {
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
        header_id: this.headerId + "",
      };
      this.dynParams = params;
      const Fn = [WaybillNoPlace, WaybillPlace][this.tabIndex];

      Fn(params).then((res) => {
        if (this.tabIndex === "0") {
          this.tableData = res.data.data || [];
        } else {
          this.tableData = res.data.list || [];
        }
        this.paginations.total = res.data.total;
        this.tableData.unshift({});
        this.header_data_list = this.tableData;
        if (setHeader) {
          this.HeaderData = res.data.item_list;
          this.Fntransformation(this.HeaderData);
        }
      });
    },
    objheader(obj) {
      this.paginations.pageIndex = 1;
      this.searchParams = obj;
      this.getDataList(false);
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleDeleteType(val) {
      this.checkedList = val;
    },
    handleClickDetail_second(row) {
      this.handleOperation(row, "detail");
    },
    handleClickEdit_second(row) {
      this.handleOperation(row, "edit");
    },

    handleClickExamine() {
      this.showExamine = true;
    },
    handleClickArchived() {
      this.showArchived = true;
    },
    handleCloseArchived() {
      this.showArchived = false;
    },
    handleShowDialog() {
      this.showDialog = true;
    },
    handleCloseDialog() {
      this.showDialog = false;
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.getDataList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.getDataList();
    },
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  padding: 10px 15px;
  background-color: #fff;

  .orderHeader {
    margin-top: 5px;
    background-color: #fff;

    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }

  .actions {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    background-color: #fff;

    .el-button + .el-dropdown,
    .el-dropdown + .el-button {
      margin-left: 10px;
    }
  }

  .tab.el-tabs--border-card {
    border: none;
    box-shadow: none;

    .el-tabs__content {
      padding: 0;
      height: 40px;
    }
  }

  /deep/.tab.el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }

  // .tab-content {
  //   padding: 10px;
  // }

  .orderHeader {
    margin-top: 5px;
    background-color: #fff;

    .orderSearch {
      form {
        ::v-deep .el-form-item__label {
          font-size: 14px;
        }

        .el-textarea {
          width: 135px;
        }
      }
    }
  }
}
</style>
    